{% extends "base.html"%} 
{% load static %} 

{% block other_css %}
<!-- Custom Search Content CSS -->
<link href="{% static 'custom/css/custom.css' %}" rel="stylesheet">

<!-- JQuery-UI CSS -->
<link rel="stylesheet" href="{% static 'vendor/jquery-ui/css/jquery-ui.css' %}">

<!-- Stylings for favorite buttons -->
<link href="{% static 'custom/css/favoriteButtonStylings.css' %}" rel="stylesheet" type="text/css" />
{% endblock %} 

{% block sideDashBoard %}

	{% include "sideDashboard.html"%}

{% endblock %}

{% block content %}

{% csrf_token %}
<form method="GET" action="{%url 'search_page'%}" novalidate>
    
	<!-- Position & Location Input Fields -->
	<nav class="navbar navbar-light bg-white" style="margin-bottom: 40px; z-index:0">
		<div class="form-inline mx-auto">
			<div class="input-group" style="margin-right: 70px">
				<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Position</span> </div> {{PostingForm.title}} </div>
			<div class="input-group">
				<div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Where</span> </div> 
				    {{ PostingForm.address }} 
				    {{ PostingForm.geolocation }} 
				    {{ PostingForm.media.js }} 
				</div>
			<div class ="input-group" style="margin-right: 15px">
				<div class="input-group-prepend">
				    <span class="input-group-text" id="basic-addon1">Category</span>
				</div>
					{{PostingForm.category}}
			</div>
			<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
		</div>
	</nav>
	<!-- Main Search Container -->
	<div style="margin: auto">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-8 " style="margin-left: 250px">
				<div class="row" style="margin-bottom: 5px; margin-top:50px">
					<div class="col-md-12 " style="padding: 0">
						<!-- Position Type Filter -->
						<div class="dropdown">
							<button class="btn dropDownMenu" type="button" id="job-type-filter"
									data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<div class="dropDownMenuHeader menuHeader1">Job Type</div>
								<span class="dot dot1"></span></button>
							<div class="dropdown-menu dropdown1" aria-labelledby="dropdownMenuButton">
								<div id="jobTypeFilter">
									<div >
										<input class="jobTypeChk filter" id="fullTimeChk" type="checkbox"
											   aria-label="Checkbox for following text input" name="Full-Time"> <a
											class="jobTypeChkLabel">Full-Time</a></div>
									<div id="secondOption">
										<input class="jobTypeChk filter" id="partTimeChk" type="checkbox"
											   aria-label="Checkbox for following text input" name="Part-Time"> <a
											class="jobTypeChkLabel">Part-Time</a></div>
									<div class="otherOption">
										<input class="jobTypeChk filter" id="internChk" type="checkbox"
											   aria-label="Checkbox for following text input" name="Internship"> <a
											class="jobTypeChkLabel">Internship</a></div>
									<div class="otherOption">
										<input class="jobTypeChk filter" id="contractChk" type="checkbox"
											   aria-label="Checkbox for following text input" name="Contract"> <a
											class="jobTypeChkLabel">Contract</a></div>
									<div class="otherOption">
										<input class="jobTypeChk filter" id="tempChk" type="checkbox"
											   aria-label="Checkbox for following text input" name="Temporary"> <a
											class="jobTypeChkLabel">Temporary</a></div>
								</div>
							</div>
						</div>
						<!-- Distance Filter -->
						<div class="dropdown">
							<button class="btn dropDownMenu headerActive" type="button" id="distance-filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<div class="dropDownMenuHeader menuHeader2">Distance</div>
								<span class="dot dot2 dotActive"></span>
							</button>
							<div class="dropdown-menu dropdown2" aria-labelledby="dropdownMenuButton" id ="distanceFilter">
								<div>
									<input type="radio" aria-label="Checkbox for following text input" name="distance" value=0> <a class="jobTypeChkLabel">Exact Location</a> </div>
								<div>
									<div>
										<input type="radio" class="filter" aria-label="Checkbox for following text input" name="distance" value=5> <a class="jobTypeChkLabel">5 miles</a> </div>
									<div>
										<input type="radio" class="filter" aria-label="Checkbox for following text input" name="distance" value=10> <a class="jobTypeChkLabel">10 miles</a> </div>
									<div>
										<input type="radio" class="filter" aria-label="Checkbox for following text input" name="distance" value=15 > <a class="jobTypeChkLabel">15 miles</a> </div>
									<div>
										<input type="radio" class="filter" aria-label="Checkbox for following text input" name="distance" value=20 > <a class="jobTypeChkLabel">20 miles</a> </div>
									<div>
										<input type="radio" class="filter default" aria-label="Checkbox for following text input" name="distance" value=25 checked> <a class="jobTypeChkLabel">25 miles</a> </div>
									<div>
										<input type="radio" class="filter" aria-label="Checkbox for following text input" name="distance" value=50> <a class="jobTypeChkLabel">50 miles</a> </div>
									<div>
										<input type="radio" class="filter" aria-label="Checkbox for following text input" name="distance" value=100> <a class="jobTypeChkLabel">100 miles</a> </div>
								</div>
							</div>

							<!-- Date Filter -->
							<div class="dropdown">
								<button class="btn dropDownMenu" type="button" id="date-filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<div class="dropDownMenuHeader menuHeader3">Date Posted</div>
									<span class="dot dot3"></span>
								</button>
								<div class="dropdown-menu dropdown3" aria-labelledby="dropdownMenuButton" id="dateFilter">
									<div>
										<input class="jobTypeChk filter default" type="radio" aria-label="Checkbox for following text input" name="posted_dur" value=0 checked> <a class="jobTypeChkLabel">Any date</a> </div>
									<div>
										<input class="jobTypeChk filter" type="radio" aria-label="Checkbox for following text input" name="posted_dur" value=1> <a class="jobTypeChkLabel">Last 24 hours</a> </div>
									<div>
										<input class="jobTypeChk filter" type="radio" aria-label="Checkbox for following text input" name="posted_dur" value=7> <a class="jobTypeChkLabel">Last 7 days</a>
									</div>
									<div>
										<input class="jobTypeChk filter" type="radio" aria-label="Checkbox for following text input" name="posted_dur" value=14> <a class="jobTypeChkLabel">Last 14 days</a>
									</div>
									<div>
										<input class="jobTypeChk filter" type="radio" aria-label="Checkbox for following text input" name="posted_dur" value=30> <a class="jobTypeChkLabel">Last 30 days</a>
									</div>
								</div>
							</div>

							<!-- Salary Filter -->
							<div class="dropdown" style="margin-bottom: 5px">
								<button class="btn dropDownMenu" type="button" id="salary-filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<div class="dropDownMenuHeader menuHeader4">Salary Range</div>
									<span class="dot dot4"></span>
								</button>
								<div class="dropdown-menu dropdown4" aria-labelledby="dropdownMenuButton" id="salaryFilter">
									<p>
										<input class="jobTypeChk filter" id="salaryRangeChk" type="checkbox"
											   aria-label="Checkbox for following text input" name="salaryRange">
										<a class="jobTypeChkLabel">Price Range:</a>
									<div class="dropdown-divider"></div>
									<input type="text" id="amount" class="text-center" readonly>
									</p>

									<div id="slider-range"></div>
								</div>
							</div>

							<!-- Other Filter -->
							<div class="dropdown">
								<button class="btn dropDownMenu" type="button" id="other-filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<div class="dropDownMenuHeader menuHeader5">Other Filters</div>
									<span class="dot dot5"></span>
								</button>
								<div class="dropdown-menu dropdown5" aria-labelledby="dropdownMenuButton" id="otherFilters">
									<div>
										<input id="workAuthChk filter" type="checkbox" aria-label="Checkbox for following text input" name="work_auth">
										<p id="workAuthChkLabel">Require U.S. Work Authorization</p>
									</div>
									<div class="dropdown-divider"></div>
								</div>
							</div>

							<!-- Clear Filter Button -->
							<button type="button" id="clearFilter" class="btn btn-link border border-black clear-filter-btn">Clear Filters</button>
						</div>
				</div>
				<div class="row">
					<div class="col-md-4  bg-white" style="border: 5px rgb(234, 234, 234) solid">

					  {% if jobexists %}
					    <!-- Post Ordering Dropdown -->
						<div class="row" id="orderingRow">
							<div class="col-md-12" style="padding: 5px">
								<div class="dropdown" style="">
									<button class="btn btn-info dropdown-toggle menuHeader6" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Relevant </button>
									<div class="dropdown-menu dropdown6" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Relevant</a> <a class="dropdown-item" href="#">Recent</a> </div>
									<div style="display: inline; position: relative; right: -25px " id="postCount">{{count}}</div>
								</div>
							</div>
						</div>
						<!-- Job Post Card List -->
						<div class="row" style="">
							<div class="col-md-12" style="padding:0px">
								<div class="list-group card-group " style=""> 
								    {% for result in results%}
									<div class = "result" id = "result{{result.id}}" value = '{{result.id}}'>
										<button type='button' name='job' value={{result.id}} class="list-group-item list-group-item-action flex-column align-items-start resultButton">
										<div class="d-flex w-100 justify-content-between">
											<div class="d-flex">
												<div class="my-auto"> <img src="https://cdn.iconscout.com/icon/free/png-256/codepen-15-896368.png" class="" alt="quixote" style="width: 70px; height: 70px; "> </div>
												<div style="margin-left: 20px; padding-top: 10px">
													<h6 class="resultCompany">{{result.company.name}}</h6>
													<h4 class="resultTitle"style="font-weight: bold">{{result.title}}</h4>
													<h6 class="resultAddress">{{result.address}}</h6>
												</div>
											</div> 
											<small class="age">{{result.age}}</small>
										</div>
									</button>
									</div>
									{% endfor %} 
								</div>
							</div>
						</div>
					</div>
					<!-- Job Post Viewing Section -->
					{% for result in results%}
					<div class="col-md-8  bg-white post" id = "post{{result.id}}"style="border: 5px rgb(234, 234, 234) solid; {% if job %} display:none; {% elif forloop.counter == 1 %} display:block; {%else%} display:none; {%endif%}">
						<div class="row">
							<div class="col-md-12 " style="padding: 0"> <img class="mx-auto d-block img-fluid bannerImg" alt="Bootstrap Image Preview" src="{{result.company.banner.url}}"/> </div>
						</div>
						<div class="row">
						    {{ no_jobs }}
							<div class="col-md-4">
                <h2 class = "jobTitle">{{result.title}}</h2>
								<h5 class = "companyName">{{result.company.name}}</h5>
								<h6 class = "salary">${{result.salary_min}} - ${{result.salary_max}}</h6>
								<small>{{result.id}} {{result.category.name}}</small>
								<small>{{result.jobtype.name}}</small>
							</div>
									<div class="col-md-8 my-auto d-flex justify-content-center" align="center">
										{% comment %}<a href="{%url 'favorite_add' result.id%}" class="btn btn-info" style="margin: 10px">Favorite</a>{% endcomment %}

										<a href="Javascript:void(0);" class="outer unfavoritedBody d-flex justify-content-center align-items-center align-self-center mr-2" value="{{result.id}}">
											<div class="heart fa fa-heart-o unfavoritedHeart"></div>
										</a>


										<a href="{% url 'applyjob' result.id%}" class="btn btn-info applyButton" style="margin: 10px">Apply Now</a>
										<a href="{%url 'quick_apply' result.id%}"class="btn btn-info applyButton" style="margin: 10px">Quick Apply</a>
								    	<a href="{% url 'userviewcompany' result.company.id%}" class="btn btn-info companyButton" style="margin: 10px; text-decoration: none; color: white">Company Page</a>
								    	<br>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 ">
								<p class="resultDescription"> {{result.description}} </p>
							</div>
						</div>
					</div>
					{% endfor %}
					{% if job %}
					<div class="col-md-8  bg-white post" id = "jobPost"style="border: 5px rgb(234, 234, 234) solid;">
						<div class="row">
							<div class="col-md-12 " style="padding: 0"> <img class="mx-auto d-block img-fluid" alt="Bootstrap Image Preview" src="{{job.company.banner.url}}" /> </div>
						</div>
						<div class="row">
							<div class="col-md-4">
								<h2>{{job.title}}</h2>
								<h5>{{job.company.name}}</h5>
								<h6>${{job.salary_min}} - ${{job.salary_max}}</h6>
								<small>{{job.id}} {{job.category.name}}</small>
								<small>{{job.jobtype.name}}</small>
							</div>
									<div class="col-md-8 my-auto d-flex justify-content-center" align="center">
										{%comment%} <a href="{%url 'favorite_add' job.id%}" class="btn btn-info" style="margin: 10px">Favorite</a> {%endcomment%}

										<a href="Javascript:void(0);" class="outer unfavoritedBody d-flex justify-content-center align-items-center align-self-center mr-2" value="{{job.id}}">
											<div class="heart fa fa-heart-o unfavoritedHeart"></div>
										 </a>


										<a href="{% url 'applyjob' job.id%}" class="btn btn-info" style="margin: 10px" name = "{% url 'quick_apply' job.id %}" value = "{% url 'applyjob' job.id%}">Apply Now</a>
								    	<a href="{%url 'userviewcompany' job.company.id%}" class="btn btn-info" style="margin: 10px; text-decoration: none; color: white">Company Page</a>
								    	<br>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<p> {{job.description}} </p>
							</div>
						</div>
					</div>
					{% endif %}
				</div>
					{% endif %}
				<div id="noJob" class="row" {%if jobexists %}style="display:none"{%endif%}>
							<div class ="col align-self-center">
									<p><h3 class="text-secondary"> No jobs matching query found.</h3></p>
							</div>
				</div>
			</div>
		</div>
		<div class="col-md-2 "> </div>
	</div>
	</div>
</form>
{%endblock%}

{% block other_js %}

<!-- Favorite Button Styling Updating JavaScript -->
<script src="{% static 'custom/js/loadFavoriteButtons.js' %}"></script>

<!-- JQuery-UI Javascript -->
<script src="../static/vendor/jquery-ui/js/jquery-1.12.4.js"></script>
<script src="../static/vendor/jquery-ui/js/jquery-ui.js"></script>

<!-- Custom Search Content JavaScript -->
<script src="../static/custom/js/custom.js"></script>
<script src="../static/custom/js/searchFilters.js"></script> 

<!-- Favorite Job Links Loading JavaScript -->
<script src="{% static 'custom/js/loadFavoriteJobs.js' %}"></script>

{%endblock%}